<template>
  <div>
    <a-form style="max-width: 500px; margin: 40px auto 0;">
      <a-form-item
        label="具体内容"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
        class="stepFormText"
        required
      >
        <a-textarea
          v-model="value"
          placeholder="请输入具体内容"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-item>
      <a-form-item :wrapperCol="{span: 17, offset: 7}">
        <a-button
          :loading="loading"
          type="primary"
          @click="nextStep"
        >提交</a-button>
        <a-button
          style="margin-left: 8px"
          @click="prevStep"
        >上一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'Step2',
  data() {
    return {
      value: '',
      loading: false
    }
  },
  methods: {
    nextStep() {
      if (this.value == '') {
        this.$message.warn('写点什么吧')
        return
      }
      this.loading = true
      this.$emit('submit', this.value)
      this.loading = false
      this.$emit('nextStep')
    },
    prevStep() {
      this.$emit('prevStep')
    }
  }
}
</script>

<style lang="less" scoped>
.stepFormText {
  margin-bottom: 24px;
  // :global {
  //   .ant-form-item-label,
  //   .ant-form-item-control {
  //     line-height: 22px;
  //   }
  // }
}
</style>
